export const TIP_COMPONENT_HTML: string = `
<div class="tip-wrapper tip-position" [style.width]='maxWidth'>
    <clr-tooltip>
        <div clrTooltipTrigger>
        <div class="tip-wrapper tip-block bar-block-high" [style.width]='tipWidth(5)'></div>
        <div class="tip-wrapper tip-block bar-block-medium" [style.width]='tipWidth(4)'></div>
        <div class="tip-wrapper tip-block bar-block-low" [style.width]='tipWidth(3)'></div>
        <div class="tip-wrapper tip-block bar-block-unknown" [style.width]='tipWidth(2)'></div>
        <div class="tip-wrapper tip-block bar-block-none" [style.width]='tipWidth(1)'></div>
        </div>
        <clr-tooltip-content [clrPosition]="'top-right'" [clrSize]="'lg'" *clrIfOpen>
            <div [ngSwitch]="scanLevel" class="bar-tooltip-font-larger">
                <ng-template [ngSwitchCase]="5">
                    <clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }}</span></span>
                </ng-template>
                <ng-template [ngSwitchCase]="4">
                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="30"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}}</span></span>
                </ng-template>
                <ng-template [ngSwitchCase]="3">
                    <clr-icon shape="play" class="tip-icon-low rotate-90" size="28"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
                </ng-template>
                <ng-template [ngSwitchCase]="2">
                    <clr-icon shape="help" size="24" style="margin-left: 3px;"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }}</span></span>
                </ng-template>
                <ng-template [ngSwitchCase]="1">
                    <clr-icon shape="check-circle"  class="is-success" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</span>
                </ng-template>
            </div>
            <hr>
            <div>
                <span class="bar-tooltip-font bar-tooltip-font-title">{{tipTitle}}</span>
            </div>
            <div class="bar-summary bar-tooltip-fon">
                <div *ngIf="hasHigh" class="bar-summary-item">
                    <span><clr-icon shape="exclamation-circle" class="is-error" size="24"></clr-icon></span>
                    <span>{{highCount}}</span><span>{{'VULNERABILITY.SEVERITY.HIGH' | translate }}</span>
                </div>
                <div *ngIf="hasMedium" class="bar-summary-item">
                    <span><clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="22"></clr-icon></span>
                    <span>{{mediumCount}}</span><span>{{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}</span>
                </div>
                <div *ngIf="hasLow" class="bar-summary-item">
                    <span><clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon></span>
                    <span>{{lowCount}}</span><span>{{'VULNERABILITY.SEVERITY.LOW' | translate }}</span>
                </div>
                <div *ngIf="hasUnknown" class="bar-summary-item">
                    <span><clr-icon shape="help" size="18"></clr-icon></span>
                    <span>{{unknownCount}}</span><span>{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}</span>
                </div>
                <div *ngIf="hasNone" class="bar-summary-item">
                    <span><clr-icon shape="check-circle" class="is-success" size="24"></clr-icon></span>
                    <span>{{noneCount}}</span><span>{{'VULNERABILITY.SEVERITY.NONE' | translate }}</span>
                </div>
            </div>
            <div>
                <span class="bar-scanning-time">{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} </span>
                <span>{{completeTimestamp | date:'MM/dd/y HH:mm:ss'}}</span>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
</div>
`;

export const GRID_COMPONENT_HTML: string = `
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 24px;">  
    <div class="row flex-items-xs-right option-right">
      <div class="flex-xs-middle">
        <hbr-filter [withDivider]="true" filterPlaceholder="{{'VULNERABILITY.PLACEHOLDER' | translate}}" (filter)="filterVulnerabilities($event)"></hbr-filter>  
        <span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
      </div>
    </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <clr-datagrid>
        <clr-dg-column [clrDgField]="'id'">{{'VULNERABILITY.GRID.COLUMN_ID' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'severity'">{{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'package'">{{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'version'">{{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'fixedVersion'">{{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}}</clr-dg-column>

        <clr-dg-placeholder>{{'VULNERABILITY.GRID.PLACEHOLDER' | translate}}</clr-dg-placeholder>
        <clr-dg-row *clrDgItems="let res of scanningResults">
            <clr-dg-cell><a href="{{res.link}}" target="_blank">{{res.id}}</a></clr-dg-cell>
            <clr-dg-cell [ngSwitch]="res.severity">
              <span *ngSwitchCase="5" class="label label-danger">{{severityText(res.severity) | translate}}</span>
              <span *ngSwitchCase="4" class="label label-medium">{{severityText(res.severity) | translate}}</span>
              <span *ngSwitchCase="3" class="label label-low">{{severityText(res.severity) | translate}}</span>
              <span *ngSwitchCase="1" class="label">{{severityText(res.severity) | translate}}</span>
              <span *ngSwitchDefault>{{severityText(res.severity) | translate}}</span>
            </clr-dg-cell>
            <clr-dg-cell>{{res.package}}</clr-dg-cell>
            <clr-dg-cell>{{res.version}}</clr-dg-cell>
            <clr-dg-cell>
                 <div *ngIf="res.fixedVersion; else elseBlock">
                    <clr-icon shape="wrench" class="is-success" size="20"></clr-icon>&nbsp;<span class="font-color-green">{{res.fixedVersion}}</span>
                 </div>
                <ng-template #elseBlock>{{res.fixedVersion}}</ng-template>
            </clr-dg-cell>
            <clr-dg-row-detail *clrIfExpanded>
            {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}}
            </clr-dg-row-detail>
        </clr-dg-row>

        <clr-dg-footer>
            <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}}</span>
             {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}}
            <clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults.length"></clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
  </div>
</div>
`;

export const BAR_CHART_COMPONENT_HTML: string = `
<div class="bar-wrapper">
    <div *ngIf="stopped" class="bar-state">
       <span class="label">{{'VULNERABILITY.STATE.STOPPED' | translate}}</span>
    </div>
    <div *ngIf="queued" class="bar-state">
        <span class="label label-orange">{{'VULNERABILITY.STATE.QUEUED' | translate}}</span>
    </div>
    <div *ngIf="error" class="bar-state bar-state-error">
        <a href="javascript:void(0);" class="error-text" (click)="viewLog()">
            <clr-icon shape="error" class="is-error" size="24"></clr-icon>
            {{'VULNERABILITY.STATE.ERROR' | translate}}
        </a>
    </div>
    <div *ngIf="scanning" class="bar-state bar-state-chart">
        <div>{{'VULNERABILITY.STATE.SCANNING' | translate}}</div>
        <div class="progress loop" style="height:2px;"><progress></progress></div>
    </div>
    <div *ngIf="completed" class="bar-state bar-state-chart">
        <hbr-vulnerability-summary-chart [summary]="summary"></hbr-vulnerability-summary-chart>
    </div>
    <div *ngIf="unknown" class="bar-state">
        <clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
        <span style="margin-left:-5px;">{{'VULNERABILITY.STATE.UNKNOWN' | translate}}</span>
    </div>
    <job-log-viewer #scanningLogViewer [jobType]="'scan'"></job-log-viewer>
</div>
`;